<template>
  <div>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法：使用@或v-on） -->
    <!-- <Student @atguigu="getStudentName" @demo="demoMsg" /> -->

    <!-- 通过父组件给子组件绑定绑定一个自定义事件实现：子给父传递数据（第二种写法：使用ref） -->
    <Student ref="Student" @click.native="demo2" />
  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      class: "软件工程",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名", name);
    },
    getStudentName(name, ...parpms) {
      console.log("App收到了学生名", name, parpms);
    },
    demoMsg() {
      console.log("demo事件被触发了");
    },
    demo2() {
      alert("组件绑定原生DOM事件");
    },
  },
  mounted() {
    this.$refs.Student.$on("atguigu", this.class);
    // this.$refs.Student.$once("atguigu", this.getStudentName);
  },
};
</script>

